<script>
import ItemLineColor from './components/item-line-color'
import { saveColorInsert, getColorInsert } from '@/api/graph-config'
import { mapState } from 'vuex'
export default {
  components: {
    ItemLineColor
  },
  created () {
    Array.from({ length: this.graphForm.holeCount }).forEach(() => {
      this.graphForm.line_colors.push({
        choice: 1,
        color: '',
      })
    })
  },
  // 初始化数据结构
  mounted () {
    this.getFormInfo()
  },
  data () {
    return {
      rules: {
        line_width: [{ required: true, message: '请填写线图宽度', trigger: 'blur' }],
        fitt_line_width: [{ required: true, message: '请填写拟合线宽度', trigger: 'blur' }],
      },
      isLoading: false,
      graphForm: {
        holeCount: 16,  // 线图颜色个数
        line_width: '',
        fitt_line_width: '',
        line_colors: [],
      }
    }
  },
  methods: {
    /**
     * 提交图形信息请求
     * @param {*} formName form表单 dom 元素
     * @returns {*} 空
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveColorInsert(this.requestData())
            .then(() => {
              this.$message.success('保存成功')
              this.$router.push('/')
            })
            .catch(err => {
              this.$message.error('网络异常')
              console.log(err)
            })
        } else {
          this.$message.error('请检查参数是否填写正确')
          return false;
        }
      });
    },

    async getFormInfo() {
      this.isLoading = true
      try {
        const { data = {}} = await getColorInsert()
        this.graphForm.line_width = data.line_width || 2.7
        this.graphForm.fitt_line_width = data.fitt_line_width || 2.3
        this.graphForm.line_colors = data.line_colors || []
      } catch(err) {
        return console.log(err)
      } finally {
        this.isLoading = false
      }
    },
    // 请求数据
    requestData() {
      return {
        line_width: this.graphForm.line_width,
        fitt_line_width: this.graphForm.fitt_line_width,
        line_colors: this.graphForm.line_colors.map(item => {
          if(item.choice === 1 && !item.color) {
            return {
              choice: 1,
              color: this.randomColor()
            }
          } else {
            return {
              choice: item.choice,
              color: item.color
            }
          }
        })
      }
    },
    // 随机颜色
    randomColor() {
      const r = Math.floor(Math.random()*256);
      const g = Math.floor(Math.random()*256);
      const b = Math.floor(Math.random()*256);
      const color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
      return color;
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  computed: {
    ...mapState({
      lineConfig: (state) => state.user.lineConfig,
    }),
  }

}
</script>
<template>
  <div class="graph_config">
    <el-card class="box-card" v-loading="isLoading">
      <el-form 
        label-width="120px" 
        :rules="rules" 
        ref="ruleForm"
        :model="graphForm">
        <el-form-item label="线图宽度" prop="line_width">
          <el-input v-model.number="graphForm.line_width"></el-input>
        </el-form-item>
        <el-form-item label="拟合线宽度" prop="fitt_line_width">
          <el-input v-model.number="graphForm.fitt_line_width"></el-input>
        </el-form-item>
        <el-form-item label="图形颜色">
          <div class="graph_content">
            <ItemLineColor 
              v-for="item in graphForm.holeCount"
              :key="item"
              v-model="graphForm.line_colors[item - 1]"
              :index="item"
            ></ItemLineColor>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button 
            style="width: 120px;" 
            @click="resetForm('ruleForm')"
          >重置</el-button>
          <el-button 
            style="width: 120px;" 
            type="primary" 
            @click="submitForm('ruleForm')"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<style lang='scss' scoped>
.graph_config {
  width: 100%;
  height: 100%;
  padding: 16px;
  .box-card {
    min-height: calc(100vh - 100px);
    .graph_content {
      display: flex;
      flex-wrap: wrap;
    }
  }
  
}
</style>